组件化的发展过程
基于命名空间的多入口文件组件
- jquery插件,一个js 一个css
基于模块的多入口文件组件
- amd js,css
单JavaScript入口组件
WebComponent
- 自定义元素
- HTML模板
- Shadow DOM
- HTML import
- lit from polymer
React 组件化
组件实现方式
- React.createClass
- ES6 Class
- 无状态函数
- Hooks
组件生命周期
组件复用
- mixin(早期特性)
- Decorator
- HOC——是一个以组件为参数的函数
- displayName
- 用途
- 操作props
- 通过ref访问组件实例
- 组件状态提升
- 用其他元素包裹组件
- 实现方式
- 属性代理
- 反向继承
- 渲染劫持
- 控制state
组件间通信
- props
- 回调函数
- 自定义事件
- Context
- EventBus
组件调试
React Developer Tools
React Context DevTool
Redux DevTools
why-did-you-update
ReactPerf
组件性能优化
- 纯函数
- PureRender(shouldComponentUpdate)
- shouldComponentUpdate
- react-addon-perf
组件测试
react-addons-test-util
Enzyme
Jest
- 浅渲染
- 全渲染
- JSDOM
- Cheerio
- Karma
Vue 组件化
小程序组件化
最后更新: 2022年03月02日 03:32
原始链接: http://rawbin-.github.io/modules/2018-12-11-fe-component/